/**
 * 动画函数
 * @param {要改变的元素} dom 
 * @param {对象里放属性} cssObj 
 * @param {总时间} time 
 * @param {回调函数} callback 
 */
 function animate(dom, cssObj, time, callback) {
    //获取元素的当前所有css属性
    var objAll = getComputedStyle(dom)
    //获取当前要修改属性的初始值
    var obj1 = {}
    for (var i in cssObj) {
        obj1[i] = parseInt(objAll[i])
    }
    //设置 20-50 毫秒内执行一次,打到动画帧效果 ,先拿到总次数
    var countAll = time / 20 //设置20毫秒一次 
    //记录 运动次数
    var count = 0
    var timer = setInterval(function(){
        count++
        for(var i in cssObj){
            //循环 cssobj 的每一项 设置当前 dom元素的每一条属性 = 初始值 + (终点 - 初始) / 要分几次完成 * 当前次数 
            if(i == opcity){
                dom.style[i] = obj1[i] + ( cssObj[i] - obj1[i] ) / countAll * count

            }else{

                dom.style[i] = obj1[i] + ( cssObj[i] - obj1[i] ) / countAll * count +"px"
            }
        }
        //判断 当前步数 等于 总步数 完成结束
        if(count >= countAll){
            clearInterval(timer)
            // 结束 执行 回调函数
            callback && callback()
        }
    },20)
}